<template>
  <div>
    <div class="myIndex_page">
      <div class="header">
        <img src="@/assets/my/back.png">
        <div class="user_box" >
            <img class="user_icon" :src="coverUrl(avatarUrl)" v-if="ifLogin&&avatarUrl" @click="toEditPage">
            <img class="user_icon" src="@/assets/my/info.png" @click='toLoginPage' v-if="!ifLogin">
            <img class="user_icon" src="@/assets/common/cover.png" v-if="ifLogin&&!avatarUrl" @click="toEditPage">
            <img class="king" v-if="ifLogin&&vip==1" src="@/assets/common/king.png"> <!-- 皇冠 -->
        </div>
        <div class="name" v-if="ifLogin">{{account}}</div>
        <div class="name" v-else @click='toLoginPage'>登录</div>
        <div class="phone" v-if="ifLogin">{{phone}}</div>
      </div>
      <div class="bodys" v-if="level!=2">
        <div class="olisBox">
          <div class="olis" @click="listPage('myorder')">
            <div class="iconsBox">
              <img src="@/assets/my/order.png">
            </div>
            <div class="wordsBox">
              <div class="box">我的订单</div>
              <div class="nextImg">
                <div class="date" v-if="ifLogin">{{orderCount}}条</div>
                <img src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
          <div class="olis" @click="listPage('mycollect')">
            <div class="iconsBox">
              <img src="@/assets/my/collect.png">
            </div>
            <div class="wordsBox">
              <div class="box">我的收藏</div>
              <div class="nextImg">
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
          <div class="olis" @click="listPage('member')">
            <div class="iconsBox">
              <img src="@/assets/my/member.png">
            </div>
            <div class="wordsBox" >
              <div class="box">VIP会员</div>
              <div class="nextImg">
                <div class="date" v-if="ifLogin&&vip!=0&&vip!=null">{{date.substring(0,10)}}到期</div>
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
        </div>
        <div class="olisBox">
          <div class="olis" @click="listPage('set')">
            <div class="iconsBox">
              <img src="@/assets/my/setting.png">
            </div>
            <div class="wordsBox" >
              <div class="box">我的设置</div>
              <div class="nextImg">
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
          <div class="olis" @click="listPage('message')">
            <div class="iconsBox">
              <img src="@/assets/my/message.png">
            </div>
            <div class="wordsBox" style="border-bottom: none">
              <div class="box" style="position:relative;">
                系统消息
                <img v-if="mess" src="@/assets/my/red.png" class="message_icon">
              </div>
              <div class="nextImg">
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="myExit" @click="loginOut" v-if="ifLogin">退出登录</div> -->
      </div>
      <div class="bodys" v-else>
        <div class="olisBox">
          <div class="olis" @click="listPage('mycollect')">
            <div class="iconsBox">
              <img src="@/assets/my/collect.png">
            </div>
            <div class="wordsBox">
              <div class="box">我的收藏</div>
              <div class="nextImg">
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
          <div class="olis" @click="listPage('set')">
            <div class="iconsBox">
              <img src="@/assets/my/setting.png">
            </div>
            <div class="wordsBox" >
              <div class="box">我的设置</div>
              <div class="nextImg">
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
          <div class="olis" @click="listPage('message')">
            <div class="iconsBox">
              <img src="@/assets/my/message.png">
            </div>
            <div class="wordsBox" style="border-bottom: none">
              <div class="box" style="position:relative;">
                系统消息
                <img v-if="mess" src="@/assets/my/red.png" class="message_icon">
              </div>
              <div class="nextImg">
                <img  src="@/assets/my/arrow.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { getMemberAPI, loginOutAPI, messageAPI } from '@/api/person.js'
import { orderCountAPI } from '@/api/order.js'
import { freeCourseAPI } from '@/api/course.js'

export default {
  name:'my',
  data() {
    return {
      ifMember:false,
      ifLogin:false,
      phone:'',
      account:'',
      avatarUrl:'',
      date:'',
      vip: '',
      level: null,
      mess: false,
      orderCount: null
    }
  },
  mounted() {
    this.isLoginPage()
    this.getCount()
    this.getOrderCount()
    this.level = localStorage.getItem('level')
  },
  methods: {
    isLoginPage() {
      if(localStorage.getItem('y-token')){
        this.ifLogin = true
        getMemberAPI().then( res => {
          if(res.data.code==0){
            this.account = res.data.data.account
            this.avatarUrl = res.data.data.cover
            this.vip = res.data.data.vip
            this.phone = res.data.data.phone
            this.date = res.data.data.vipEndTime ? res.data.data.vipEndTime : ''
            let str = this.phone ? this.phone.match(/(\d{3})(\d{4})(\d{4})/).slice(1).reduce(
              function (value, item, index) {
                return index === 1 ? value + "****" : value + item;
              }
            ) : null
            this.phone = str
          }
        })
      }else{
        this.ifLogin = false
      }
    },
    getCount() { //获取是否有未读消息
      if(localStorage.getItem('y-token')) {
        messageAPI().then(res => {
          if(res.data.code === 0) {
            res.data.data > 0 ? this.mess = true : this.mess = false
          } else {
            Toast(res.data.msg)
          }
        })
      }
    },
    getOrderCount() { //获取订单总数量
      if(localStorage.getItem('y-token')) {
        orderCountAPI().then(res => {
          res.data.code === 0 ? this.orderCount = res.data.data : Toast(res.data.msg)
        })
      }
    },
    listPage(name) { //跳转我的订单，我的收藏，VIP会员，我的设置，系统消息页面
      if(this.isLogin()) {
        this.navigationFuc(name)
      }
    },
    toLoginPage() {//login
      this.navigationFuc('login')
    },
    toEditPage() {
      if(this.isLogin()) {
        this.navigationFuc('edit')
      }
    },
    loginOut() { //退出登录
      let that = this
      this.$confirm('确认要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        loginOutAPI().then(res => {
          if(res.data.code==0){
            Toast('退出成功')
            localStorage.clear()
            that.isLoginPage()
          }
        })
      })
    }
  }
}
</script>


<style scoped>
.myIndex_page{
  height: calc(100vh - 1.3rem);
  width: 100%;
  overflow: hidden;
  background: #FBFBFB;
}
.myIndex_page .header{
  height: 3.9rem;
  position: relative;
  width: 100%;
}
.myIndex_page .header img{
  height: 100%;
  width: 100%
}
.myIndex_page .header .user_box{
  height: 1.26rem;
  width: 1.26rem;
  position: absolute;
  overflow:hidden;
  top: 1.09rem;
  left: 50%;
  margin-left: -0.63rem;
  display:block;
}
.myIndex_page .header .user_icon{
  height: 1.26rem;
  width: 1.26rem;
  border-radius: 50%;
}
.myIndex_page .header .name{
  font-size: 19px;
  color: white;
  position:absolute;
  top: 2.5rem;
  left: 50%;
  transform:translate(-50%,0%)
}
.myIndex_page .header .phone {
  position: absolute;
  top: 3rem;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  left: 50%;
  transform: translate(-50%,0%);
}
.myIndex_page .header .king{
  position: absolute;
  bottom: 0;
  left: 0.8rem;
  height: 0.36rem;
  width: 0.36rem;
  border-radius: 50%;
}
.myIndex_page .bodys{
  padding: 0.1rem 0.2rem 0.3rem;
  height: calc(100vh - 3.5rem);
}
.myIndex_page .bodys .olis{
  height: 1.08rem;
  background: white;
  border-radius: 0.2rem; 
  display: flex;
}
.myIndex_page .bodys .olis:last-child .wordsBox {
  border-bottom: none;
}
.myIndex_page .bodys .olisBox{
  background: white;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
  overflow: hidden;
}
.myIndex_page .bodys .iconsBox{
  width: 0.98rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.myIndex_page .bodys .iconsBox img{
  height: 0.3rem;
  width: 0.3rem;
  vertical-align: middle;
}
.myIndex_page .bodys .box{
  line-height: 1.08rem;
  font-size: 16px;
}
.myIndex_page .bodys .myExit{
  text-align: center;
  margin-top: 0.3rem;
  font-size: 16px;
  color: #2A6AD7;
}
.myIndex_page .bodys .wordsBox{
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.myIndex_page .bodys .date{
  color: #999999;
  font-size: 12px;
  line-height: 1.08rem;
  margin-right: 0;
}
.myIndex_page .bodys .message_icon {
  position: absolute;
  width: 0.09rem;
  height: 0.09rem;
  right:0;
  top:16px;
}
.myIndex_page .bodys .nextImg{
  display: flex;
  justify-content: center;
  align-items: center;
}
.myIndex_page .bodys .nextImg img{
  height: 0.24rem;
  width: 0.14rem;
  margin-right: 0.3rem;
  margin-left: 0.3rem;
}
.myIndex_page .bodys .olisBox .wordsBox{
  border-bottom: 1px solid #EEEEEE;
}
.myIndex_page .wxBtn {
  border: none !important;
  background: none !important;
  display: flex;
  justify-content: space-between;
  flex: 1;
  position: static;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* .myIndex_page .wxBtn .box {
  font-size: 18px;
} */
</style>
<style>
  .el-message-box {
    width: 250px !important;
  }
</style>
